<!-- 问卷 -->
<template>
	<view class="multiple-page">
		<view class="multiple-list" v-for="(item,index) in questions" :key="index" :class="{'hidden':item.hidden}">

			<view class="multiple-num">
				<span>Q{{index+1}}</span>
			</view>
			<view class="multiple-title">
				{{item.title}}
			</view>
			<view class="multiple-tab" v-for="(item2,index2) in item.option" :key="index2">
				<!-- <view class="multiple-option-id">
					{{item2.id}}
				</view> -->
				<view class="multiple-tab-value" :class="{'multiple-tab-value-avatar': item2.avatar==1}"
				@tap="handleOption(index,index2,item.is_multiple)">
					{{item2.value}}
				</view>
			</view>
			<view class="multiple-foot">
				<view class="multiple-foot-div">
					<view class="multiple-prior" :class="{'hidden':index<1}" @tap="handlePrior(index)">
						{{'<'}} 
					</view>
				</view>
				<view class="multiple-foot-div">
					<view class="multiple-next" :class="{'hidden':index+1>=count}" @tap="handleNext(index)">NEXT</view>
					<view class="multiple-next" :class="{'hidden':index+1!=count}" @tap="handleSubmit()">NEXT</view>
				</view>
			</view>
			
		</view>
		
		<view class="questionnaireinfo-foot2">
			测试题由Magisches Element实验室设计
		</view>
	</view>
</template>

<script>

import http from '@/shopro/request/index'

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {
	},
	data() {
		return {
			id:0,
			count:0,//题目数量
			correct_num:0,//符合数量
			do_num:0,//做了几遍
			// questions: [
			// 	{
			// 		id:1,
			// 		title:'面部皮肤是否反复潮（泛）红或出现难以消退的红斑？',
			// 		hidden:false,
			// 		progress:50,
			// 		option:[{
			// 			id:1,
			// 			value:'是',
			// 			avatar:0
			// 		},{
			// 			id:2,
			// 			value:'否',
			// 			avatar:0
			// 		}]
			// 	},
			// 	{
			// 		id:2,
			// 		title:'面部是否反复出现以下的情况（可多选）？',
			// 		hidden:true,
			// 		progress:100,
			// 		option:[{
			// 			id:1,
			// 			value:'干燥',
			// 			avatar:0
			// 		},{
			// 			id:2,
			// 			value:'灼热',
			// 			avatar:0
			// 		},{
			// 			id:3,
			// 			value:'刺痛',
			// 			avatar:0
			// 		},{
			// 			id:4,
			// 			value:'瘙痒',
			// 			avatar:0
			// 		},{
			// 			id:5,
			// 			value:'以上都无',
			// 			avatar:0
			// 		}]
			// 	}
			// ],
			questions: [],
		};
	},
	// 是否登录
	computed: {
		...mapGetters(['isLogin', 'authType']),
	},
	onLoad(e) {
		let that = this;
		that.id=e.id;
		this.getIssue();
	},
	methods: {
		// 检测
		checkActivity(data, type) {
			if (data) {
				return !data.includes(type);
			}
			return true;
		},
		// 路由跳转
		jump(path, parmas) {
			this.showShare = false;
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 回到首页
		goHome() {
			this.$Router.replaceAll('/pages/index/index');
		},

		// 选项卡
		onTab(id) {
			this.tabCurrent = id;
		},
		
		// 组件返回的type;
		changeType(e) {
			this.buyType = e;
		},
		// 组件返回的规格;
		getSkuText(e) {
			this.currentSkuText = e;
		},
		//获取问题列表
		getIssue(){
			let that = this;
			that.$http(
				'questionnaire.issue', {
					id: that.id,
					type: 2
				},
			).then(res => {
				that.questions=res.data.questionnaire;
				that.count=res.data.count;
				that.do_num=res.data.num;
				that.correct_num=res.data.info.correct_num;
			}).catch(e => {
				reject(e)
			});
		},
		handleOption(key1,key2,is_multiple){
			let that = this;
			if(that.do_num<3){
				if(that.questions[key1]['option'][key2]['avatar']==0){
					that.questions[key1]['option'][key2]['avatar']=1;
				}else{
					that.questions[key1]['option'][key2]['avatar']=0;
				}
			}
		},
		handlePrior(key){
			let that = this;
			for(let i=0;i<that.count;i++){
				that.questions[i]['hidden']=true;
			}
			that.questions[key-1]['hidden']=false;
		},
		handleNext(key){
			let that = this;
			for(let i=0;i<that.count;i++){
				that.questions[i]['hidden']=true;
			}
			that.questions[key+1]['hidden']=false;
		},
		handleSubmit(){
			let that = this;
			that.$http(
				'questionnaire.submitMultiple', {
					questions: that.questions,
					id:that.id,
				},
				'提交中...'
			).then(res => {
				// uni.switchTab({
				// 	url: '/pages/index/index'
				// });
				uni.reLaunch({
					url: '/pages/questionnaire/multiple_submit?id=2'
				});
				
				// this.jump('/pages/questionnaire/multiple_submit',{id:2});
			}).catch(e => {
				reject(e)
			});
		}
	}	
};
</script>

<style lang="scss">
	.hidden{
		display: none;
	}
	.multiple-page{
		position: relative;
		background-color:#bebebe;
		min-height: 100%;
		padding-top: 70rpx;
		padding-bottom: 120rpx;
	}
	.multiple-list{
		margin: 0 33rpx 0 33rpx;
		padding: 20rpx 85rpx 114rpx 85rpx;
		background-color:#bebebe;
		color: #444;
		border-radius: 50rpx;
	}
	.multiple-head{
		background-color:#bebebe;
		height: 10rpx;
	}
	.multiple-head2{
		background-color: blue;
		height: 10rpx;
		z-index: 2;
	}
	.multiple-num{
		display: flex;
		justify-content: center;
		padding-bottom: 40rpx;
	}
	.multiple-num span{
		font-size: 58rpx;
		margin: 0 auto;
		background-color:#bebebe;
		color: #444;
		padding: 20rpx;
		border-radius: 30rpx;
		margin: 0;
		min-width: 120rpx;
		min-height: 120rpx;
	}
	.multiple-title{
		font-size: 40rpx;
		color: #444;
		margin-bottom: 70rpx;
	}
	.multiple-tab{
		font-size: 28rpx;
		color: #444;
		padding: 18rpx 0 18rpx 0;
	}
	.multiple-tab-value{
		background-color:#bebebe;
		color: #444;
		border-radius: 40rpx;
		padding: 15rpx 54rpx 15rpx 54rpx;
	}
	.multiple-tab-value-avatar{
		background-color:#bebebe;
		color: #444;
		border-radius: 40rpx;
		// text-align: center;
		padding: 15rpx 54rpx 15rpx 54rpx;
	}
	.multiple-foot{
		display: flex;		
		justify-content: space-between;
		padding: 70rpx 0 0 0;
	}
	.multiple-foot-div{
		min-width: 20rpx;
		min-height: 20rpx;
	}
	.multiple-prior{
		background-color:#bebebe;
		color: #444;
		border-radius: 40rpx;
		font-size: 50rpx;
		padding: 7rpx 40rpx 7rpx 40rpx;
	}
	.multiple-next{
		background-color:#bebebe;
		color: #444;
		border-radius: 40rpx;
		padding: 20rpx 40rpx 20rpx 40rpx;
	}
	.questionnaireinfo-foot2{
		position: absolute;
		bottom: 60rpx;
		text-align: center;
		width: 100%;
		font-size: 19rpx;
		color: #444;
	}
</style>
